import $ from "jquery";

export default class CommonTemplateMenu {                           // JS 语法


    constructor(title, valueList) {
        this.title = title
        this.tag = 'button'
        this.showDropPanel = true
        this.list = null
        this.valueList = valueList
    }

// 菜单是否需要激活（如选中加粗文本，“加粗”菜单会激活），用不到则返回 false
    isActive(editor) {                      // JS 语法
        return false
    }

// 获取菜单执行时的 value ，用不到则返回空 字符串或 false
    getValue(editor) {                               // JS 语法
        return ''
    }

// 菜单是否需要禁用（如选中 H1 ，“引用”菜单被禁用），用不到则返回 false
    isDisabled(editor) {                     // JS 语法
        return false
    }

// 点击菜单时触发的函数
    exec(editor, value) {                              // JS 语法
        // DropPanel menu ，这个函数不用写，空着即可
    }

// 定义 DropPanel 内部的 DOM Element
    getPanelContentElem(editor) {                        // JS 语法

        if (this.list === null) {
            let html = `<ul>`
            for (let obj of this.valueList) {
                html += `<li class="mock-menu">` + obj + `</li>`
            }
            html += `</ul>`
            this.list = $(html)
            this.list.on('click', 'li', function () {
                editor.insertText(this.innerHTML)
                // editor.insertText('\n')
            })
        }

        return this.list[0] // 返回 DOM Element 类型

    }
}